<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="TextNode">
    <div class="text-box-controls">
      <i class="openFold" :class="nodeOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="updateNodeState()" />
      <div v-if="!nodeOpen" class="title">{{ text }}</div>
      <i class="el-icon-delete-solid" @click="deleteTextNode" />
    </div>
    <div v-show="nodeOpen" class="text-box-content">
      <div>{{ text }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from "vue"
import { ElMessageBox } from 'element-plus'
import dagGraph from 'src/pages/designerTool/canvas/DagEdit/graph/index.js'
const id = ref('')
const nodeOpen = ref(true)
const text = ref('')

const getGraph = inject('getGraph')
const getNode = inject('getNode')

onMounted(() => {
  const node:any = getNode
  id.value = node.id
  const nodeData = node.getData()
  text.value = nodeData.value
  // 监听数据改变事件
  node.on('change:data', ({ current }:any) => {
    text.value = current.value
  })
})
function updateNodeState() {
  nodeOpen.value = !nodeOpen.value
}
function deleteTextNode() {
  ElMessageBox.confirm('确定删除该文本框吗？', '删除文本框', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    dagGraph.removeCell(id.value)
  })
}
</script>

<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";

.TextNode {
  width: 224px;
  max-height: 164px;
  border: 1px solid #b0bec5;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 249, 228);
  text-align: left;

  .text-box-controls {
    flex-basis: 20px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: rgba(50, 50, 50, .05);
    padding: 0 12px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    i {
      cursor: pointer;
    }

    .title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      padding: 0 10px;
      overflow: hidden;
    }

    .openFold {
      border: 1px solid #606266;
      border-radius: 50%;
      font-size: 12px;
    }
  }

  .text-box-content {
    border-top: 1px solid #b0bec5;
    padding: 6px;
    overflow: auto;
    height: 164px;

    &>* {
      word-break: break-word;
      font-size: inherit;
      color: inherit;
      text-align: inherit;
      font-weight: inherit;
      width: 100%;
      line-height: 1.5;
    }

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(33, 33, 33, .2);
      border-radius: 2px;
    }

    &>textarea {
      background: hsla(0, 0%, 100%, .5);
      border: none;
      outline: none;
      resize: none;
    }
  }
}

.x6-node-selected {
  .TextNode {
    border: 1px solid $--color-blue;
    box-shadow: 0 0 3px 3px rgba(48, 86, 227, 0.15);

    &:hover {
      box-shadow: 0 0 5px 5px rgba(48, 86, 227, 0.15);
    }
  }
}
</style>
